<template>
  <div id="app">
    <drawer :show="drawerShow" :placement="placement" :showMode="showMode" @update:show="changeDrawerShow" @on-hide="onHide" @on-show="onShow">
      <!-- 导航 -->
      <div class="layout" slot="drawer">
        <ul class="nav">
          <li v-for="item in navlist">
            <router-link :to="item.path" :title="item.name">
              <img :src="item.icon">
              <span>{{ item.name }}</span>
            </router-link>
          </li>
        </ul>
      </div>

      <!-- 头部 -->
      <transition :name="name">
        <div class="header">
          <x-icon type="navicon" v-on:click="drawerToggle" class="icon-nav" size="30"></x-icon>
          <div class="logo">
            <a href="#/"><p>{{ Comname }}</p></a>
          </div>
          <a href="#/list_classify"><x-icon class="search" type="ios-search-strong" size="25"></x-icon></a>
        </div>
      </transition>

      <!-- 路由 -->
      <transition :name="name">
        <keep-alive>
        <router-view class="child-view"></router-view>
        </keep-alive>
      </transition>

      <!-- 底部 -->
      <transition :name="name">
        <div class="footer">
          <a href="http://wpa.qq.com/msgrd?v=3&uin=740092856&site=qq&menu=yes"><img :src="qq" /></a> 
          <p>咨询电话： <a :href='"tel:"+tel'></a> {{ tel }}</p>
          <span>{{ copyRight }}</span>
        </div>
      </transition>
      
        <!-- 工具条 -->
        <div class="toolbar">
          <ul>
            <li v-for="item in toolbar">
              <a :href="item.link">
                <img :src="item.icon" />
                <p>{{ item.title }}</p>
              </a>
            </li>
          </ul>
        </div>
    </drawer>
  </div>
</template>

<script>
  import { Drawer } from 'vux'
  export default {
    data() {
      return {
        placement: 'left',
        showMode: 'push',
        drawerShow: false,
        name: 'slide-left', // 默认动态路由变化为slide-right
        Comname : '综合商城',
        navlist : [
          {
            path: '/',
            name: '首页',
            icon: require('./assets/home.png')
          },
          {
            path: '/list_classify',
            name: '产品分类',
            icon: require('./assets/009_ov8h.png')
          },
          {
            path: '/list_groupprice?list=groupprice',
            name: '精品团购',
            icon: require('./assets/010_hrtj.png')
          },
          {
            path: '/list_groupprice?list=seckill',
            name: '限时秒杀',
            icon: require('./assets/007_gsn8.png')
          },
          {
            path: '/list_article',
            name: '帮助中心',
            icon: require('./assets/005_r27e.png')
          },
          {
            path: '/list_experience',
            name: '体验心得',
            icon: require('./assets/002_43hh.png')
          },
        ],
        copyRight: '2012-0005© 2003-2016 xxxxx.COM 版权所有',
        tel: '400-000-0000',
        qq: require('./assets/qq_1.png'),
        toolbar: [
          {
            icon: require('./assets/home_uuqd.png'),
            title: '首页',
            link: '#/'
          },
          {
            icon: require('./assets/list_u05t.png'),
            title: '分类',
            link: '#/list_classify'
          },
          {
            icon: require('./assets/shop.png'),
            title: '购物车',
            link: '#/list_cart'
          },
          {
            icon: require('./assets/user.png'),
            title: '我的',
            link: '#/list_user'
          },
        ]
      }
    },
    methods: {
      drawerToggle() {
        this.drawerShow = !this.drawerShow
      },
      onHide() {
        let wrap = this.$el.firstChild.firstChild;
        if(this.placement == 'left') {
          wrap.classList.remove('actives');
        } else if(this.placement == 'right') {
          wrap.classList.remove('activer');
        }
      },
      changeDrawerShow(state) {
        this.drawerShow = state;
      },
      onShow() {
        let wrap = this.$el.firstChild.firstChild;
        if(this.placement == 'left') {
          wrap.classList.add('actives');
        } else if(this.placement == 'right') {
          wrap.classList.add('activer');
        }
      }
    },
    watch: {        //监听路由切换
      $route() {
        this.drawerShow = false;
      }
    },
    components: {
      Drawer
    },
  }
</script>

<style>
  body,a,p,li,ul,h1,h2,h3,h4,h5,strong,div {
    font:.12rem "Microsoft YaHei","黑体",Helvetica,Arial,Tahoma,sans-serif;
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    color:#5a5a5a;
  }
  ul,li {
    list-style: none;
  }
  #app {
    height: 100%;
  }
  body {
    height: 100%;overflow-x: hidden !important; max-width: 768px; margin: 0 auto; background-size:100% 100%; background: #fff;
  }
  html {
    height: 100%;
  }
  .nav {
    background:#333;
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
  }
  .nav img{
    width:.3rem;
    height:.3rem;
    border-radius:50%;
    border:0.01rem solid #fff;
    padding:.08rem;
  }
  .nav span{
    display: block; margin-top:.05rem;
  }
  .nav a {
    display: block;
    border-bottom:.01rem solid rgba(255,255,255,0.15);
    padding:.12rem;
    color:#fff;
    text-align: center;
  }
  .vux-drawer .actives {
    -webkit-transform: translate3d(1.5rem, 0px, 0px) !important;
    transform: translate3d(1.5rem, 0px, 0px) !important;
  }
  .vux-drawer .activer {
    -webkit-transform: translate3d(-1.5rem, 0px, 0px) !important;
    transform: translate3d(-1.5rem, 0px, 0px) !important;
  }
  .vux-drawer>.vux-drawer-content {
    background-image:url(./assets/navbar_bg.png); background-color:transparent !important; width:1.5rem; overflow-y: auto !important;
  }
  .header {
    height: 0.5rem;
    overflow: hidden;
    width: 100%;
    background:rgb(200, 17, 24);
  }
  .header .logo {
    float: left;
    width: 76%;
    text-align: center;
  }
  .header .logo p{
    color: #fff;
    height:.5rem;
    line-height:.5rem;
    font-size:.2rem;
  }
  .header .icon-nav {
    fill: #fff;
    cursor: pointer;
    float: left;
    width:10%;
    text-align: center;
    height:.5rem;
    margin:0 0 0 2%;
  }
  .header .search{
    width:10%;
    float: right;
    fill:#fff;
    height:.5rem;
    text-align: center;
    margin:0 2% 0 0;
  }
  .footer{
    background:rgb(67, 67, 67);
    width:100%;
    text-align: center;
    padding:.24rem 0 .4rem;
  }
  .footer p{
    color:#fff;
    font-size: .15rem;
    margin:.2rem 0 .1rem;
  }
  .footer span{
    color:rgb(204, 204, 204);
  }
  .toolbar{
    width:100%; 
    max-width:768px; 
    text-align: center;
    background: #fff;
  }
  .toolbar ul{
    overflow:hidden;
    border-top:1px solid #c81118;
    padding:.05rem 0;
  }
  .toolbar ul a{
    width:25%;
    display: block;
    float: left;
  }
  .toolbar ul img{
    width:.22rem;
    height:.22rem;
  }
  .toolbar ul p{
    color:#9c9c9c;
  }
  .page{
      width:100%; margin:.3rem auto .2rem; text-align:center; overflow:hidden;
  }
  .page a{
      background:#eee; width:.8rem; border-radius:.03rem; display:inline-block; margin:0 .15rem; height:.33rem; line-height:.33rem; float:left;
  }
  .page .select{
    display:inline-block; position:relative;width:.96rem; height:.3rem; float:left;
  }
  .page .select .val{
       border:1px solid #ccc; position:absolute; background:#eee; width:.96rem; height:.3rem; text-align:center; line-height:.3rem; border-radius:.04rem;
  }
  .page .select select{
      opacity:0; position:absolute; width:100%; left:0; height:.3rem;
  }

  
  /* 路由切换动画 */
  .child-view {
    width: 100%;
    -webkit-transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
    transition: all .5s cubic-bezier(.55, 0, .1, 1);
  }
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 0.5s;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
  }
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>